<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
<title>角色管理</title>
<script type="text/javascript" src="pages/system/role/js/role.js"></script>
</head>

<body>
	<div class="container-fluid">
		<ul class="nav nav-tabs">
			<li role="presentation" class="active"><a href="#role-info"
				aria-controls="role-info" role="tab" data-toggle="tab">角色信息管理</a>
			</li>
			<li role="presentation"><a id="user-tab" href="#role-userinfo"
				aria-controls="role-userinfo" role="tab" data-toggle="tab">角色的用户管理</a>
			</li>
			<li role="presentation"><a id="menu-tab" href="#role-menuinfo"
				aria-controls="role-menuinfo" role="tab" data-toggle="tab">角色的菜单管理</a>
			</li>
		</ul>
		<div class="tab-content">
			<div id="role-info" role="tabpanel" class="tab-pane active">
				<div id="toolbar" class="toolbar">
					<button id="addRole-btn" type="button" class="btn btn-default">
						<i class="glyphicon glyphicon-plus"></i>添加
					</button>
					<button id="delRole-btn" type="button" class="btn btn-default">
						<i class="glyphicon glyphicon-remove"></i>删除
					</button>
				</div>
				<table id="role-table"></table>
			</div>

			<div id="role-userinfo" role="tabpanel" class="tab-pane">
				<div class="row">
					<div class="col-md-2">
						<div class="panel-group panel-default" id="accordion1"
							role="tablist" aria-multiselectable="true">
							<div class="panel panel-default">
								<div class="panel-heading" role="tab" id="heading1">
									<h4 class="panel-title">
										<a role="button" data-toggle="collapse"
											data-parent="#accordion1" href="#collapse1"
											aria-expanded="true" aria-controls="collapse1"> 系统角色 </a>
									</h4>
								</div>
								<div id="collapse1" class="panel-collapse collapse in"
									role="tabpanel" aria-labelledby="heading1">
									<div class="panel-body">
										<ul id="role-list1" class="nav nav-list"></ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-10">
						<div id="toolbar1" class="toolbar">
							<button id="roleAddUser-btn" type="button"
								class="btn btn-default">
								<i class="glyphicon glyphicon-plus"></i>添加
							</button>
							<button id="roleDelUser-btn" type="button"
								class="btn btn-default">
								<i class="glyphicon glyphicon-remove"></i>移除
							</button>
						</div>
						<table id="user-table"></table>
					</div>
				</div>
			</div>

			<div id="role-menuinfo" role="tabpanel" class="tab-pane">
				<div class="row">
					<div class="col-md-2">
						<div class="panel-group panel-default" id="accordion2"
							role="tablist" aria-multiselectable="true">
							<div class="panel panel-default">
								<div class="panel-heading" role="tab" id="heading2">
									<h4 class="panel-title">
										<a role="button" data-toggle="collapse"
											data-parent="#accordion2" href="#collapse2"
											aria-expanded="true" aria-controls="collapse2"> 系统角色 </a>
									</h4>
								</div>
								<div id="collapse2" class="panel-collapse collapse in"
									role="tabpanel" aria-labelledby="heading2">
									<div class="panel-body">
										<ul id="role-list2" class="nav nav-list"></ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-10">
						<div id="toolbar2" class="toolbar">
							<button id="roleAddMenu-btn" type="button"
								class="btn btn-default">
								<i class="glyphicon glyphicon-plus"></i>添加
							</button>
							<button id="roleDelMenu-btn" type="button"
								class="btn btn-default">
								<i class="glyphicon glyphicon-remove"></i>移除
							</button>
						</div>
						<table id="menu-table"></table>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- roleinfo Modal -->
	<div id="roleinfo-modal" class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">角色信息</h4>
				</div>
				<div class="modal-body">
					<form id="roleinfo-form" class="form-horizontal">
						<div class="form-group">
							<label for="roleName" class="col-md-2 control-label">角色名</label>
							<div class="col-md-6">
								<input type="text" id="roleId" name="roleId" hidden>
								<input type="text" class="form-control info-input" id="roleName" name="roleName" placeholder="角色名">
							</div>
							<label id="roleName-label" class="col-md-4 info-label"></label>
						</div>
						<div class="form-group">
							<label for="roleOrder" class="col-md-2 control-label">序&nbsp;&nbsp;号</label>
							<div class="col-md-6">
								<input type="text" class="form-control info-input" id="roleOrder" name="roleOrder" placeholder="序号">
							</div>
							<label id="roleOrder-label" class="col-md-4 info-label"></label>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="roleinfo-save-btn" type="button" class="btn btn-primary" >保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- userNotInRole Modal -->
	<div id="userNotInRole-modal" class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">给角色添加用户</h4>
				</div>
				<div class="modal-body">
					<div id="userNotInRole-toolbar" class="toolbar">
							<button id="userJoinRole-btn" type="button"
								class="btn btn-default">
								<i class="glyphicon glyphicon-plus"></i>添加
							</button>
						</div>
						<table id="userNotInRole-table"></table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- menuNotInRole Modal -->
	<div id="menuNotInRole-modal" class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">给角色添加菜单</h4>
				</div>
				<div class="modal-body">
					<div id="menuNotInRole-toolbar" class="toolbar">
							<button id="menuJoinRole-btn" type="button"
								class="btn btn-default">
								<i class="glyphicon glyphicon-plus"></i>添加
							</button>
						</div>
						<table id="menuNotInRole-table"></table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
	
</body>
</html>
